<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>微信风格表情插件</title>
  <style>

    .chat-container {
      width: 400px;
      margin: 50px auto;
      border: 1px solid #ddd;
      border-radius: 5px;
      padding: 10px;
    }
    
    #chat-input {
      width: 100%;
      height: 60px;
      padding: 10px;
      box-sizing: border-box;
      border: 1px solid #ccc;
      border-radius: 4px;
      resize: none;
      font-weight:700;
      font-family:"微软雅黑";
    }
    
    .toolbar {
      display: flex;
      padding: 5px 0;
    }
    
    #emoji-btn {
      background: none;
      border: none;
      font-size: 20px;
      cursor: pointer;
      color: #888;
    }
    
    #emoji-panel {
      display: none;
      border: 1px solid #ddd;
      border-radius: 5px;
      padding: 10px;
      max-height: 100px;
      overflow: auto;
      background: white;
      z-index: 1000;
    }
  </style>
</head>
<body>
  <div class="chat-container">
    <textarea id="chat-input" placeholder="输入消息..."></textarea>
    
    <div class="toolbar">
      <button id="emoji-btn">😊</button>
      <!-- 其他功能按钮 -->
    </div>
    
    <div id="emoji-panel">
      <!-- 表情将动态加载 -->
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $(document).ready(function() {
    // 表情数据
    const emojis = [
      "😀", "😃", "😄", "😁", "😆", "😅", "😂", "🤣", "😊", "😇",
      "🙂", "🙃", "😉", "😌", "😍", "🥰", "😘", "😗", "😙", "😚",
      "😋", "😛", "😝", "😜", "🤪", "🤨", "🧐", "🤓", "😎", "🥸",
      "🤩", "🥳", "😏", "😒", "😞", "😔", "😟", "😕", "🙁", "☹️",
      "😣", "😖", "😫", "😩", "🥺", "😢", "😭", "😤", "😠", "😡"
    ];
    
    // 初始化表情面板
    function initEmojiPanel() {
      const panel = $('#emoji-panel');
      panel.empty();
      
      // 创建表情网格
      const grid = $('<div class="emoji-grid"></div>');
      grid.css({
        display: 'grid',
        gridTemplateColumns: 'repeat(10, 1fr)',
        gap: '5px'
      });
      
      // 添加表情
      emojis.forEach(emoji => {
        const emojiBtn = $('<button class="emoji-item"></button>');
        emojiBtn.text(emoji);
        emojiBtn.css({
          background: 'none',
          border: 'none',
          fontSize: '20px',
          cursor: 'pointer',
          padding: '5px'
        });
        
        emojiBtn.click(() => {
          insertEmoji(emoji);
        });
        
        grid.append(emojiBtn);
      });
      
      panel.append(grid);
    }
    
    // 插入表情到输入框
    function insertEmoji(emoji) {
      const input = $('#chat-input');
      const cursorPos = input[0].selectionStart;
      const text = input.val();
      
      input.val(
        text.substring(0, cursorPos) + 
        emoji + 
        text.substring(cursorPos)
      );
      
      // 更新光标位置
      input[0].selectionStart = cursorPos + emoji.length;
      input[0].selectionEnd = cursorPos + emoji.length;
      input.focus();
    }
    
    // 切换表情面板
    $('#emoji-btn').click(function() {
      const panel = $('#emoji-panel');
      if (panel.is(':visible')) {
        panel.hide();
      } else {
        initEmojiPanel();
        panel.show();
      }
    });
    
    // 点击页面其他地方关闭表情面板
    $(document).click(function(e) {
      if (!$(e.target).closest('#emoji-panel, #emoji-btn').length) {
        $('#emoji-panel').hide();
      }
    });
  });
  </script>
</body>
</html>